<template>
<div class="detail-wrap">
    <div>
        <van-nav-bar title="订单详情" left-arrow @click-left="onClickLeft" @click-right="onClickRight" />
    </div>
    <div>
        <van-steps :active="active">
            <van-step>提交订单</van-step>
            <van-step>支付订单</van-step>
            <van-step>商家发货</van-step>
            <van-step>确认收货</van-step>
            <van-step>已完成</van-step>
        </van-steps>
    </div>

    <div class="status">
        <span class="order_status">订单状态</span>
        <span class="status_detail">
            <template v-if="data.status == 'Wait'">
                待付款
            </template>
            <template v-else-if="data.status == 'Paid'">
                待发货
            </template>
            <template v-else-if="data.status == 'Dispatch'">
                配送中
            </template>
            <template v-else-if="data.status == 'Finish'">
                已完成
            </template>
            <template v-else-if="data.status == 'Refund'">
                退款
            </template>
        </span>
    </div>
    <van-contact-card type="edit" :name="data.params.address.realname" :tel="`${data.params.address.city}${data.params.address.county}${data.params.address.address}`" :is-edit='false' />
    <div class="note">
        买家留言：{{ data.params.params || '没有留言' }}
    </div>

    <van-card :num="data.params.number" :price="data.params.price" :desc="data.params.params" :title="data.params.title" :thumb="data.params.avatar" />
    <div style="margin: 10px 0 0;">
        <van-panel title="运费" :status="data.box_price"></van-panel>
        <van-panel title="实付款(含运费)" :status="data.price"></van-panel>
        <!-- <van-panel title="订单积分" status="249"></van-panel> -->
        <template v-if="active < 1">
           <van-panel title="支付方式" status="未支付"></van-panel>
        </template>
        <template v-else>
           <van-panel title="支付方式" :status="data.pay_params == null ? '余额支付' : '微信支付'"></van-panel>
        </template>
        
    </div>
    <div class="foot">
        <p>订单编号: {{ data.order_sn }}</p>
        <p>下单时间：{{ data.created_at }}</p>
    </div>

</div>
</template>

<script>
export default {
    name: 'Detail',
    data() {
        return {
            active: 1,
            data: null,
            address: null
        };
    },
    created() {
        this.data = this.global.state.orderDetailsData;
        this.address = this.global.state.orderDetailsData.params.address;
        console.log(this.data);
        
        this.getstate()
    },
    methods: {
       getstate(){
          switch (this.global.state.orderDetailsData.status) {
             case 'Paid':
                this.active = 1
                break;
          
             case 'Dispatch':
                this.active = 2
                break;
          
             case 'Finish':
                this.active = 4
                break;
          
             default:
                this.active = 0
                break;
          }
       },
        onClickLeft() {
            this.$router.go(-1)
        },
        onClickRight() {
            Toast('按钮');
        }
    }
}
</script>

<style scoped>
.info {
    width: 100%;
    height: 35px;
    background: white;
    line-height: 35px;
}

.name {
    margin-left: 5%
}

.phone {
    margin-left: 10%
}

.address {
    width: 100%;
    height: 60px;
    background: white;
}

.tags {
    margin-left: 4%;
    float: left
}

.address_name {
    width: 70%;
    height: 60px;
    float: left;
    margin-left: 2%
}

.arrow {
    margin-left: 4%;
    float: left
}

.status {
    width: 100%;
    background: white;
    line-height: 35px;
    /* margin-top: 10px */
    margin: 7px 0;
}

.order_status {
    margin-left: 5%
}

.status_detail {
    margin-left: 5%;
    color: red
}

.note {
    width: 100%;
    background: white;
    margin: 10px 0 5px;
    padding: 10px 7px;
}

.all {
    width: 100%;
    height: 105px;
    margin: 5px auto;
    background: #EFEFEF;
    border-top: 5px solid white
}

.contain {
    width: 100%;
    height: 105px;
    color: #939393;
    border-top: 1px solid #F3F3F3;
    border-bottom: 1px solid #F3F3F3
}

.left {
    width: 22%;
    height: 80px;
    float: left;
    padding: 10px 10px
}

.left img {
    width: 100%;
    height: 100%;
}

.middle {
    width: 50%;
    float: left;
    font-size: 12px;
    color: #717171
}

.right {
    width: 15%;
    float: right;
    font-size: 12px;
}

.right .num {
    color: red
}

.foot {
    width: 100%;
    background: white;
    padding: 3px 12px;
    margin-top: 10px
}
</style>
